<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item><b>选课</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!-- 滚动字幕容器 -->
  <div class="marquee-container">
    <div class="marquee-content">
      所有选修课课程安排在每周公休的时间（每周四下午到晚上），每个班级限额最多35人
    </div>
  </div>

  <!-- 数据表格 -->
  <div style="margin:40px 20px 20px 20px">
    <el-table :data="tableCourse" stripe border style="width: 100%">
      <el-table-column prop="cid" label="课程号" align="center"/>
      <el-table-column prop="cname" label="课程名" align="center"/>
      <el-table-column prop="tname" label="任课教师" align="center"/>
      <el-table-column prop="ltime" label="上课时间" align="center"/>
      <el-table-column prop="location" label="上课地点" align="center"/>
      <el-table-column prop="chour" label="课时数" align="center"/>
      <el-table-column prop="remainingSeats" label="剩余名额" align="center"/>
      <el-table-column label="操作" align="center" width="150">
        <template #default="{ row }">
          <el-button type="primary" @click="handleSelectCourse(row)">选课</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 分页 -->
  <div class="pagination-container">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,10]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import request from "@/utils/class";
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

////////////////表格///////////////////////
onMounted(() => {
  getCourse();
})
let totals = ref(0)
// 表格信息显示
const tableCourse = ref([]);
const getCourse = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value
  };

  request({
    url: '/choose/all',
    method: 'get',
    params,
  }).then(res => {
    if (res.data.errorCode === 200) {
      tableCourse.value = res.data.data.records;
      totals.value = res.data.data.total;
    }
  }).catch(err => {
    console.error('Error fetching courses:', err);
  });
}

/////////分页///////////
const currentPage = ref(1);
const pageSize = ref(10);
const handleSizeChange = (val) => {
  pageSize.value = val;
  getCourse();
}
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getCourse();
}

////////////////表格的动作////////////////////

const handleSelectCourse = (row) => {
  const tid = row.tid;
  const cid = row.cid;
  const ltime = row.ltime;
  // 从 sessionStorage 获取 sid
  const loginUser = sessionStorage.getItem('loginUser');
  const user = JSON.parse(loginUser);
  const sid = user.sid;

  const requestData = {
    tid: tid,
    cid: cid,
    sid: sid,
    ltime: ltime
  };

  request({
    url: '/choose/course',
    method: 'post',
    data: requestData
  }).then(res => {
    console.log(res);  // Corrected to log `res` instead of `req`
    console.log(res.data);
    if (res.data.errorCode === 200) {
      ElMessage.success('选课成功！');
      getCourse(); // 重新获取课程列表以刷新界面
    } else {
      ElMessage.error('选课失败：' + res.data.message);
    }
  }).catch(err => {
    console.error('Error selecting course:', err);
  });
}


</script>


<style scoped>
/* 滚动字幕容器样式 */
.marquee-container {
  position: relative;
  overflow: hidden;
  height: 30px;
  background-color: darkgrey;
  color: white;
  padding: 5px;
  box-sizing: border-box;
  white-space: nowrap;
}

/* 滚动内容样式 */
.marquee-content {
  position: absolute;
  white-space: nowrap;
}

/* 创建无限滚动效果 */
.marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 90%; /* 根据需要调整宽度，确保背景看起来是无限的 */
  background: darkgrey;
  z-index: 1;
}

/* 滚动动画 */
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* 应用滚动动画 */
.marquee-content {
  animation: marquee 15s linear infinite;
  z-index: 2; /* 确保内容在背景之上 */
}

/* 分页居中样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin: 20px auto; /* 根据需要调整外边距 */
}
/* 面包屑样式 */
.el-breadcrumb {
  font-size: 18px; /* 调整字体大小 */
  margin-top: 20px;
  margin-bottom: 50px;
  margin-left: 20px;
}

.el-table {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 现代字体 */
  color: #333; /* 字体颜色 */
  border-top: 1px solid #e8e8e8; /* 表格顶部边框 */
  border-radius: 10px; /* 圆角边框 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
}

.el-table th,
.el-table td {
  padding: 10px; /* 单元格内边距 */
  border-bottom: 1px solid #e8e8e8; /* 行间边框 */
}

/* 表格美化样式 */
.el-table th {
  text-align: center; /* 表头内容居中 */
  background-color: #eef1f6; /* 调整表头背景色 */
  font-weight: bold; /* 表头字体加粗 */
}
</style>